<template>
  <div class="pie_container">
    <el-row>
      <!-- 30.67顶部的销售与销售额按钮切换，使用 element-plus 里面的 Select 选择器的基础用法 -->
      <el-col :span="20">
        <el-radio-group v-model="type" size="large">
          <el-radio-button label="sale_">销量</el-radio-button>
          <el-radio-button label="_money">销售额</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="4">
        <!-- 30.68右侧顶部的下拉选项 -->
        <el-select v-model="day">
          <el-option v-for="item in dayOptions" :key="day" :label="item.label" :value="item.day">{{ item.label
          }}</el-option>
        </el-select>
      </el-col>
    </el-row>

    <!-- 30.24创建饼图容器 -->
    <div class="pie_box" ref="pieRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, toRefs, watch } from 'vue';
// 30.27导入 echarts
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

// 30.26获取ref
const pieRef = ref<HTMLDivElement | null>(null)

// 30.69定义下拉选框的选项内容
const dayOptions = [{ day: 'yesterday', label: '昨天' }, { day: 'today', label: '今天' }, { day: 'three_days', label: '前3天' }, { day: 'seven_days', label: '前7天' }, { day: 'fourteen_days', label: '前14天' }]

// 30.70定义响应式数据，一开始默认选中的类型
const day = ref('yesterday')
const type = ref('_money')

// 30.54定义传递过来的 props 的数据类型
interface IProp {
  data: ISalePie[],
  [index: string]: any
}

// 30.53接口父组件传递过来的数据
// const props = defineProps({data: []})
// 30.55约束 props 的接收类型
const props = defineProps<IProp>()

// 30.56将 pie 作为一个全局的变量
let pie: echarts.ECharts;

// 30.28需要在 onMounted 里面获取到 ref 实例
onMounted(() => {
  // 30.29如果没有获取到 pieRef
  if (!pieRef.value) {
    // 30.30那么久返回
    return
  }
  // 30.31初始化 echarts 实例并将其绑定到指定的 DOM 元素上
  // const pie = echarts.init(pieRef.value)
  // 30.57这里的 pie 已经在外面全局定义了
  pie = echarts.init(pieRef.value)

})

// 30.58 option 里面的 data 是由我们父传子的传入
const { data } = toRefs(props)
// 30.59这里 option 需要在接口返回的时候我们才做处理，所以这里加上 watch 去监听，请求数据返回，我们才生成
watch(data, () => {
  // 30.61当数据发生变化的时候，我们将 data 赋值,我们这里要对data进行处理，要求满足 echarts 需要 series 的 data，该 data 需要由 {name, value}
  // 30.62将 data.value 先约束类型
  let formatData = data.value as any as ISalePie[];
  // 30.63转 data 的返回格式，返回 name 和 value
  let newData = formatData.map(item => ({
    name: item.name,
    value: parseInt(item.sale_fourteen_days)
  }))

  // 30.32在 echarts 网站里面的 示例处可以找到需要对应饿图
  let option: EChartsOption = {
    // 30.65这个是鼠标移入的提示
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,0.6)',
      textStyle: {
        color: '#fff'
      },
      formatter: '{b} {c} ({d}%)'
    },
    // 30.66图列
    legend: {
      top: '15%',
      // left: 'center',
      left: 'right',
      height: 100,
      orient: 'vertical'
    },
    // 30.40标题显示
    // 30.41去到 http 文件夹的 api.ts 文件
    // 顶部标题
    // title: {
    //   text: '我是标题',
    //   //位置居中显示 
    //   left: 'center'
    // },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          // show: false,
          show: true,
          // 30.39线性的未知
          // position: 'center'
          position: 'outside'
        },
        // 30.37高亮的时候状态
        emphasis: {
          // label: {
          //   show: true,
          //   fontSize: 40,
          //   fontWeight: 'bold'
          // }
        },
        labelLine: {
          // 30.38线性的状态
          // show: false
          show: true
        },
        // 30.60这里的 data 因为是传过来的，所以先用空数组存起来
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
        // data: []
        // 30.64将转换好的 newData 赋值给 data
        data: newData
      }
    ]
  };
  // 30.33使用 echarts 实例 pie 的 setOption() 方法将 option 对象作为参数传入
  // 30.34去到 Home 文件夹里面的 Echarts.vue 文件
  pie.setOption(option)
})


// 30.71当用户去修改销量销售额的按钮，或者是下拉选框的数据，我们需要监听
// 30.72监听 type 和day
watch([type, day], () => {
  // 30.73重新组织数据，重新渲染饼图
  console.log(type.value, day.value)
  let key = day.value;
  if (type.value === 'sale_') {
    key = type.value + key;
  } else {
    key = key + type.value
  }
  // 30.74再根据key，取出 数组里面的数据，作为 饼图的 data 的 value
  let newData = data.value.map((item: any) => ({
    name: item.name,
    value: item[key]
  }))

  let option: EChartsOption = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,0.6)',
      textStyle: {
        color: '#fff'
      },
      formatter: '{b} {c} ({d}%)'
    },
    legend: {
      top: '15%',
      left: 'right',
      height: 100,
      orient: 'vertical'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside'
        },
        labelLine: {
          show: true
        },
        data: newData
      }
    ]
  };
  pie.setOption(option)
})

</script>

<style lang="less" scoped>
// 30.25给容器写宽高
.pie_container {
  width: 100%;

  .pie_box {
    height: 400px;
  }
}
</style>